<!--  -->
<template>
  <el-timeline>
    <el-timeline-item
      v-for="item in chapterData"
      :key="item.id"
      :timestamp="item.timestamp"
      placement="top"
    >
      <el-card>
        <h4>{{ item.content }}</h4>
      </el-card>
    </el-timeline-item>
  </el-timeline>
</template>

<script setup>
import { ref } from 'vue'
import { watchSwitchLang } from '@/utils/i18n'
import { useStore } from 'vuex'

const text = [
  [
    { content: 'vue/cli 脚手架搭建', timestamp: '第一步', id: 1 },
    { content: '标准化大厂编程规范解决方案之ESLint + Git Hooks ', timestamp: '第二步', id: 2 },
    { content: '项目架构解决方案之搭建登录基础架构', timestamp: '第三步', id: 3 },
    { content: '项目架构解决方案之搭建Layout基础架构', timestamp: '第四步', id: 4 },
    { content: '后台项目前端综合解决方案之 通用功能开发', timestamp: '第五步', id: 5 },
    { content: 'vue3 + element plus 综合实现解决方案之个人中心页面', timestamp: '第六步', id: 6 },
    { content: 'excel 、zip 与前端结合解决方案之用户管理页面实现', timestamp: '第七步', id: 7 },
    { content: '权限控制解决方案之角色、权限页面渲染实现项目的权限控制功能', timestamp: '第八步', id: 8 },
    { content: '列表排序解决方案之实现热门文章排名', timestamp: '第九步', id: 9 },
    { content: '文章编辑解决方案之实现创建文章功能', timestamp: '第十步', id: 10 },
    { content: '错误综合处理方案之错误页面的统一处理', timestamp: '第十一步', id: 11 },
    { content: '项目发布解决方案之构建与发布', timestamp: '第十二步', id: 12 },
    { content: '应用', timestamp: '第十三步', id: 13 }
  ],
  [
    { content: 'Vue / cli scaffold construction', timestamp: 'Step One', id: 1 },
    { content: 'ESLint + Git Hooks, a standardized programming specification solution for major manufacturers', timestamp: 'Step Two', id: 2 },
    { content: 'Project architecture solution to build a login infrastructure', timestamp: 'Step Three', id: 3 },
    { content: 'Project architecture solution to build Layout infrastructure', timestamp: 'Step Four', id: 4 },
    { content: 'General function development of front-end integrated solutions for back-end projects', timestamp: 'Step Five', id: 5 },
    { content: 'Personal center page of vue3 + element plus comprehensive implementation solution', timestamp: 'Step Six', id: 6 },
    { content: 'Implementation of user management page of excel, zip and front-end combined solution', timestamp: 'Step Seven', id: 7 },
    { content: 'The role and permission page rendering of the permission control solution realizes the permission control function of the project', timestamp: 'Step Eight', id: 8 },
    { content: 'List sorting solution to achieve popular article ranking', timestamp: 'Step Nine', id: 9 },
    { content: 'Article editing solution to realize the function of creating articles', timestamp: 'Step Ten', id: 10 },
    { content: 'Unified handling of error pages in the comprehensive error handling solution', timestamp: 'Step Eleven', id: 11 },
    { content: 'Construction and release of project release solutions', timestamp: 'Step Twelve', id: 12 },
    { content: 'Apply', timestamp: 'Step Thirteen', id: 13 }
  ]
]
const store = useStore()
let check = ref(store.getters.language === 'zh' ? 0 : 1)
const chapterData = ref(text[check.value])

const setData = () => {
  check = ref(store.getters.language === 'zh' ? 0 : 1)
  chapterData.value = text[check.value]
}

watchSwitchLang(() => {
  setData()
})

</script>
<style lang="scss" scoped>
</style>
